<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/mypage/public/common.jspf"%>
<!DOCTYPE html>
<html>
<head>
<link
	href="${pageContext.request.contextPath}/page/module/assets/plugins/DataTables/css/data-table.css"
	rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/ueditor/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/ueditor/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/page/third/ueditor/utf8-jsp/lang/zh-cn/zh-cn.js"></script>	
<title>博客管理-文章列表</title>
<style type="text/css">
body{
padding-right:0px !important;
}
.table-page {
	float: right;
	margin: 0 auto;
}

.pagination>li>a {
	font-size: 12px;
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pagination>li>a:focus, .pagination>li>a:hover, .current {
	color: #fff !important;
	background: #242a30 !important;
	border-color: #d8dde1;
}

.btn-group-sm>.btn, .input-group-btn>.btn-sm {
	padding: 8px 10px !important;
}
.form-horizontal{
	padding:5px 90px 5px 30px;
}
.modal-dialog {
    width: 600px;
    margin: 50px auto !important;
}
.modal-footer {
    text-align: center !important;
}
.savebtn{
    background: #2d353c !important;
    border-color: #2d353c !important;
}
.table-responsive td>a{
    color: #2d353c !important;
    text-decoration: none;
}
.gradeX>td{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.hidden-xs>a:first-child{
margin-left:70px;
}
</style>
<script type="text/javascript">
	function goPage(currentPage) {
		$("#hidePage").val(currentPage);
		searchArticle();
	}
	//ueditor编辑器
	var ue = UE.getEditor('editor', {   
	    autoHeightEnabled: false,   
	    autoFloatEnabled: false,
		toolbars: [[
		             'fullscreen','source', '|', 'undo', 'redo', '|',
		            'bold', 'italic', 'underline', 'fontborder', 'strikethrough',  'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
		            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
		            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
		            'directionalityltr', 'directionalityrtl', 'indent', '|',
		            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
		            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
		            'simpleupload', 'insertimage', 'emotion',  'map', 'insertcode',  'pagebreak', 'template', 'background', '|',
		            'horizontal', 'date', 'time', 'spechars',   '|',
		            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols',  '|',
		            'preview', 
		        ]]
	});
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	UE.Editor.prototype.getActionUrl = function(action) {
	    if (action == "/uploadArticleImg") {
	        return "${pageContext.request.contextPath}/uploadArticleImg.do";
	    } else {
	        return this._bkGetActionUrl.call(this, action);
	    }
	}	
	//获取单条记录
	function searchArtInfo(articleid){
		$('#myModal').removeData();
		var url="${pageContext.request.contextPath}/searchArticleInfo.do?"+(new Date()).getTime();
		$.ajax({
			url:url,
			dataType:'json',
			type:'post',
			cache:false,
			async:false,
			data:{'articleid':articleid},
			success:function(data){
				$("#title").val(data.articlevo.title);
				$("#hideid").val(data.articlevo.id);
				$("#keywords").val(data.articlevo.keyword);
				$("#typeId").val(data.articlevo.typeId);
				ue.setContent(data.articlevo.content);
				$("#myModalLabel").html("编辑博客");
				$("#articleform").attr("action","${pageContext.request.contextPath}/goUpdateArticleInfo.do");
			}

		})
		$('#myModal').modal('show');
	}
	//删除单条
    function delArtInfo(articleid){
		window.location.href="${pageContext.request.contextPath}/goDeleteArticleInfo.do?ids="+articleid;
	}
	$(function(){
		//清除modals缓存数据
		$("#myModal").on("hidden.bs.model",function(e){$(this).removeData();});  
	})
	function searchArticle(){
		$("#searchform").submit();
	}
	function newArticle(){
		$("#myModalLabel").html("发布博客");
		$("#articleform").attr("action","${pageContext.request.contextPath}/goAddArticleInfo.do");		
		$('#myModal').modal('show');
		$("#myModal").on("show.bs.modal",function(e){$(this).removeData();});  
	}
</script>
</head>
<body>
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- 主要内容 -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!--头部内容-->	
		<jsp:include page="/WEB-INF/mypage/back/header.jsp"></jsp:include>
		<!--左侧导航-->
		<jsp:include page="/WEB-INF/mypage/back/leftnav.jsp"></jsp:include>
		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">Tables</a></li>
				<li class="active">Managed Tables</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">
				文章列表<small></small>
			</h1>
			<!-- end page-header -->

			<!-- begin row -->
			<div class="row">
				<!-- begin col-12 -->
				<div class="col-md-12">
					<!-- begin panel -->
					<div class="panel panel-inverse">
						<div class="panel-heading">
							<h4 class="panel-title">&nbsp;<!-- Data Table - Default --></h4>
						</div>
						<div class="panel-body">
							<div class="table-responsive">
								<!--搜索框  -->
								<div class="col-md-2">
								<form id="searchform" action="${pageContext.request.contextPath}/goArticleList.do">
									<div class="input-group m-b-15">
										<input type="text" class="form-control input-sm"
											placeholder="标题" name="searchTitle" value="${searchTitle}"/> <span class="input-group-btn">
											<button class="btn btn-sm btn-inverse" type="button" onclick="searchArticle()">
												<i class="fa fa-search"></i>
											</button>
										</span>
										<input type="hidden" name="currentPage" id="hidePage">
									</div>
									</form>
								</div>
								<!--增删改按钮  -->
								<div class="col-md-7"></div>
								<div class="col-md-3">
									<div class="email-btn-row hidden-xs">
										<a href="#" class="btn btn-sm btn-inverse" onclick="newArticle()"><i class="fa fa-plus m-r-5"></i>
											新建</a> <a href="#"
											class="btn btn-sm btn-inverse"><i
											class="fa fa-remove m-r-5"></i> 删除</a>
									</div>
								</div>
								<table id="data-table" class="table table-striped table-hover" style="table-layout:fixed">
									<thead>
										<tr>
											<th>标题</th>
											<th>内容</th>
											<th>文章摘要</th>
											<th>文章分类</th>
											<th>关键字</th>
											<th>评论总数</th>
											<th>浏览总数</th>
											<th>回复总数</th>
											<th>发布时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${Page.result}" var="article">
											<tr class="odd gradeX">
												<td>${article.title}</td>
												<td>${article.content}</td>
												<td>${article.summary}</td>
												<td>${article.typeName}</td>
												<td>${article.keyword}</td>
												<td>${article.comments}</td>
												<td>${article.scans}</td>
												<td>${article.replies}</td>
												<td><fmt:formatDate pattern="yyyy-MM-dd"
														value="${article.releasedate}" /></td>
												<td>
													<a href="javascript:void(0)" class="fa fa-edit m-r-5" onclick="searchArtInfo('${article.id}')" ></a>
													<a href="javascript:void(0)" class="fa fa-remove m-r-5" onclick="delArtInfo('${article.id}')"></a>
												 </td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
							<!--分页  -->
							<div class="table-page">
								<ul class="pagination">
									<c:if test="${Page.pageNum>=1}">
										<li><a href="javaScript:void(0)" onclick="goPage('1');">首页</a></li>
									</c:if>
									<c:if test="${Page.pageNum>5}">
										<li><a href="javaScript:void(0)"
											onclick="goPage('${Page.pageNum-5}');">&laquo;</a></li>
									</c:if>
									<c:if test="${Page.pageNum>1}">
										<li><a href="javaScript:void(0)"
											onclick="goPage('${Page.pageNum-1}');">&lsaquo;</a></li>
									</c:if>
									<c:forEach var="i" begin="${Page.startPage}"
										end="${Page.endPage}" step="1">
										<c:if test="${Page.pageNum==i}">
											<li><a id="page" href="javaScript:void(0)"
												class="current">${i}</a></li>
										</c:if>
										<c:if test="${Page.pageNum!=i}">
											<li><a href="javascript:void(0);"
												onclick="goPage('${i}');">${i}</a></li>
										</c:if>
									</c:forEach>
									<c:if test="${Page.endPage<Page.pages}">
										<li><a href="javaScript:void(0)">&hellip;</a></li>
									</c:if>
									<c:if test="${Page.pageNum<Page.pages}">
										<li><a href="javaScript:void(0)"
											onclick="goPage('${Page.pageNum+1}');">&rsaquo; </a></li>
										<c:if test="${Page.pageNum+5<=Page.pages }">
											<li><a href="javaScript:void(0)"
												onclick="goPage('${Page.pageNum+5}');"> &raquo; </a></li>
										</c:if>
									</c:if>
									<li><a href="javaScript:void(0)"
										onclick="goPage('${Page.pages}');">尾页</a></li>
								</ul>
							</div>
							<!--分页结束  -->
						</div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-12 -->
			</div>
			<!-- end row -->
		</div>
		<!-- end #content -->

		<!-- 返回顶部 -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- 结束 -->

		<!-- 新建弹出框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width:800px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">发布博客</h4>
					</div>
					<form class="form-horizontal" role="form" id="articleform"  action="${pageContext.request.contextPath}/goAddArticleInfo.do" method="post">
					<input type="hidden" id="hideid" name="id"/>
					<div class="modal-body">
							<div class="form-group">
								<label for="title" class="col-sm-3 control-label">标题：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="title"
										placeholder="请输入标题" name="title" value="">
								</div>
							</div>
							<div class="form-group">
								<label for="keywords" class="col-sm-3 control-label">关键字：</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="keywords"
										placeholder="请输入关键字以，隔开" name="keyword" value="">
								</div>
							</div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">文章分类：</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="typeId">
                                    	<c:forEach items="${mblogType}" var="type">
                                    		<option value="${type.id}">${type.typename }</option>
                                    	</c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">文章内容：</label>
                                <div class="col-sm-9">
 									<script id="editor" type="text/plain" style=" z-index:1000" name="content"></script>
                                </div>
                            </div>
					</div>
					<div class="modal-footer">
						<button  type="submit" class="btn btn-primary savebtn">保存</button>
						<button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->

		</div>
		<!-- 结束主要内容 -->

		<script
			src="${pageContext.request.contextPath}/page/module/assets/plugins/DataTables/js/jquery.dataTables.js"></script>
		<script
			src="${pageContext.request.contextPath}/page/module/assets/js/table-manage-default.demo.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/page/module/assets/js/apps.min.js"></script>
		<script>
			$(document).ready(function() {
				App.init();
				//TableManageDefault.init();
			});
		</script>
		<script>
			(function(i, s, o, g, r, a, m) {
				i['GoogleAnalyticsObject'] = r;
				i[r] = i[r] || function() {
					(i[r].q = i[r].q || []).push(arguments)
				}, i[r].l = 1 * new Date();
				a = s.createElement(o), m = s.getElementsByTagName(o)[0];
				a.async = 1;
				a.src = g;
				m.parentNode.insertBefore(a, m)
			})(window, document, 'script',
					'//www.google-analytics.com/analytics.js', 'ga');

			ga('create', 'UA-53034621-1', 'auto');
			ga('send', 'pageview');
		</script>
</body>
</html>

